클라이언트와 서버 데이터 연동 (거래) 테스트

선언 거래와 직접 거래를 비교하고, 요청·응답·Hook 동작을 추적합니다.

QCN

전달하려는 주요 내용

  • 클라이언트(화면)와 서버가 데이터를 주고받는 '거래'의 개념을 이해합니다.
  • HandStack에서 제공하는 두 가지 거래 방식의 차이를 알아봅니다.
  • 거래에 필요한 요청/응답 정보 정의 방법을 학습합니다.
  • 거래 전후에 특정 로직을 실행하는 'Hook 이벤트'를 알아봅니다.
  • 실제 데이터 연동 과정을 실습하여 결과를 확인합니다.
QCN

거래란 무엇인가요?

거래는 요청과 응답으로 묶는 업무 작업 단위입니다. DB 트랜잭션의 원자성 범위와 구분합니다.

  • 클라이언트에서 업무 서버간에 거래를 한다
  • 업무 서버에서 메시지 서버간에 거래를 한다
  • 메시지 서버에서 데이터베이스 서버간에 거래를 한다
  • 메시지 서버에서 외부 서비스간에 거래를 한다

화면에서 업무 거래를 위해 클라이언트와 서버간에는 반드시 어떻게 요청과 응답이 이뤄질 것인지 계약을 정의 해야 합니다.

QCN

거래 방식: 어떻게 통신할까?

HandStack은 두 가지 거래 방식을 제공하여 유연한 개발을 지원합니다.

  • 선언 거래

    • 화면 JavaScript 에서 transaction 항목에 거래 정보를 선언합니다.
    • 간결하고 일관된 코드를 만들수 있습니다.
  • 직접 거래

    • 자바스크립트 코드 내에서 syn.$w.transactionDirect 함수를 호출하는 방식입니다.
    • 복잡한 조건 처리나 동적 데이터 구성이 필요할 때 사용합니다.
QCN

거래 정보 정의: 무엇을 주고받을까? (1/2)

거래 정보는 입력|출력 형식으로 dataMapInterface 을 구성하여, 콤마(,)로 구분하여 여러 정보를 구성합니다.

  • 입력 정보 (클라이언트 -> 서버)

    • Row: 단일 건의 데이터 (예: 입력 폼 하나의 정보)
    • List: 여러 건의 데이터 (예: 그리드의 변경된 행 목록)
  • 출력 정보 (클라이언트 <- 서버)

    • Form: 단일 건의 데이터 (예: 상세 조회 결과)
    • Grid: 여러 건의 데이터 (예: 목록 조회 결과)
QCN

거래 정보 정의: 무엇을 주고받을까? (2/2)

  • 조합 예시
    • Row|Form: 단일 건을 보내고 단일 건을 받음 (저장 후 상세조회)
    • List|Grid: 목록을 보내고 목록을 받음 (다수 항목 상태 변경)
QCN

거래 Hook 이벤트: 언제 개입할까? (1/2)

거래의 특정 시점에 실행할 함수를 미리 정의하여 로직을 관리할 수 있습니다.

  • beforeTransaction
    • 서버로 거래를 요청하기 직전에 호출됩니다.
    • 주로 입력값 유효성 검사, 데이터 전처리, 사용자 확인 창 표시에 사용됩니다.
    • 이 함수에서 false를 반환하면 거래 실행이 중단됩니다.
QCN

거래 Hook 이벤트: 언제 개입할까? (2/2)

  • afterTransaction
    • 서버로부터 응답을 받은 직후에 호출됩니다.
    • 주로 응답 데이터 후처리, 특정 UI 상태 변경, 결과 메시지 표시에 사용됩니다.
QCN

화면 요소와 데이터 바인딩

syn-datafield 속성을 사용하면 HTML 요소를 데이터와 쉽게 연결할 수 있습니다.

  • HTML의 syn-datafield, 화면 거래의 dataFieldID, 서버 계약의 출력 순서·형식을 함께 맞춥니다.
  • 요청은 belongID 등 입력 매핑에 따라 Row 또는 List로 수집합니다.
  • 정확한 규칙은 거래 호출 참조를 확인합니다.
QCN

거래 로직 구현 구조 (1/4)

페이지별 자바스크립트 파일에 hook과 transaction 객체를 정의하여 거래 관련 로직을 관리합니다.

QCN

거래 로직 구현 구조 (2/4)

'use strict';
let $TST010 = {
    hook: {
        beforeTransaction(transactConfig) {
            var functionID = transactConfig.functionID;
            if (functionID == 'LD02') {
            }
        },

        afterTransaction(error, functionID, responseData, addtionalData) {
            if (functionID == 'LD02') {

            }
        },
QCN

거래 로직 구현 구조 (3/4)

    },

    // 거래 메서드 선언
    transaction: {
        LD01: {
            inputs: [{ type: 'Row', dataFieldID: 'MainForm' }],
            outputs: [{ type: 'Grid', dataFieldID: 'DocumentList', clear: true }]
        },

        LD02: {
            inputs: [{ type: 'Row', dataFieldID: 'DocumentList' }],
            outputs: [{ type: 'Grid', dataFieldID: 'ReceiptList' }]
        }
    },
QCN

거래 로직 구현 구조 (4/4)

};
QCN

거래 계약 정보 (1/2)

클라이언트에서 요청되는 모든 데이터는 기본적으로 신뢰하지 않습니다.

  • TST 프로젝트의 TST010 거래를 LD01 서비스 ID로 요청을 확인합니다.

  • LD01 수신 정보는 인증 정보(Authorize)가 필요 한지 확인합니다.

  • 반환되는 데이터 포맷은 무엇인지 확인합니다.

  • 요청은 데이터베이스 요청으로 트랜잭션을 수행해야 하는지 확인합니다.

QCN

거래 계약 정보 (2/2)

  • 요청 정보는 하나의 Row에 여러 Column으로 구성된 정보가 요청되며 이때 어떤 Fields 정보라도 허용합니다.

  • 응답은 계약에 정의한 Form·Grid 등 출력 형식과 일치해야 합니다.

  • 필수 입력 누락 사례로 서버 검증과 오류 응답을 확인합니다.

QCN

거래 요청과 응답 설정 (1/2)

{
    "ApplicationID": "HDS",
    "ProjectID": "TST",
    "TransactionID": "TST010",
    "Comment": "테스트 > 첫번째 테스트 거래",
    "Services": [
        {
            "ServiceID": "LD01",
            "Authorize": false,
            "ReturnType": "Json",
            "CommandType": "D",
            "TransactionScope": false,
            "Inputs": [],
            "Outputs": []
QCN

거래 요청과 응답 설정 (2/2)

        }
    ],
    "Models": []
}
QCN

요청/응답 정보 예시 확인하기

https://handstack.kr/docs/startup/learning/비즈니스-데이터-개발-시작하기#테스트

중요 항목

GlobalID: 고유 거래 ID

QCN

잠깐, 구분해 보기

더미 응답으로 화면이 동작하면 실제 거래도 검증된 것일까요?

QCN

더미(Dummy) 데이터로 프론트엔드 테스트하기

백엔드 API가 준비되지 않았을 때, dummyfile 설정을 통해 프론트엔드 개발을 미리 진행할 수 있습니다.

  • $(HANDSTACK_HOME)/tmp/HDS/dummyfile 디렉토리 생성
  • [앱 ID]/[프로젝트 ID]/[거래 ID] 와 같이 디렉토리를 생성 (HDS/TST/TST020)
  • [기능 ID]에 해당하는 .dat 데이터 파일을 저장

참고 더미 파일 경로: $(HANDSTACK_HOME)/modules/transact/wwwroot/transact/dummyfile/TST020

QCN

Postman 거래 호출하기

QCN

연동 테스트의 완료 기준

  • Row·List 입력과 Form·Grid 출력을 계약에 맞춥니다.
  • beforeTransaction·afterTransaction과 GlobalID를 확인합니다.
  • 더미 시험 후 같은 조건으로 실제 서버 응답을 비교합니다.
QCN

발표: 첫 화면의 목표를 말한 뒤 핵심 개념과 예제로 진행합니다. 확인 질문 뒤에는 답할 시간을 주고, 마지막 완료 기준을 남겨 질문을 받습니다. 발표 구성 참고: MIT OpenCourseWare, Patrick Winston, How to Speak (2018), https://ocw.mit.edu/courses/res-tll-005-how-to-speak-january-iap-2018/pages/how-to-speak/

이어지는 코드 조각입니다. 앞뒤 페이지를 순서대로 읽으며 전체 예제의 일부임을 설명합니다.

이어지는 코드 조각입니다. 앞뒤 페이지를 순서대로 읽으며 전체 예제의 일부임을 설명합니다.

이어지는 코드 조각입니다. 앞뒤 페이지를 순서대로 읽으며 전체 예제의 일부임을 설명합니다.

이어지는 코드 조각입니다. 앞뒤 페이지를 순서대로 읽으며 전체 예제의 일부임을 설명합니다.

이어지는 코드 조각입니다. 앞뒤 페이지를 순서대로 읽으며 전체 예제의 일부임을 설명합니다.

질문 후 잠시 기다립니다. 답이 없으면 앞에서 본 예제를 다시 가리킵니다. 확인할 답: 더미는 화면 매핑을 확인합니다. 실제 인증·SQL·저장 결과는 별도로 시험해야 합니다. 다음 주제로 넘어가기 전에 차이를 청중의 표현으로 한 번 확인합니다.

질문을 받는 동안 이 확인 기준을 화면에 남깁니다. 청중이 자신의 업무에 적용할 다음 행동 하나를 고르게 합니다.